<template>
  <div id="DataMaintenance-childProperty">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('gradenSet.gradenSet.childProperty.50zgg4kymns0')}}</span>
      </div>
      <div class="cr-head-right">
        <el-button type="primary" size="mini" @click="handAdd">{{$t('gradenSet.gradenSet.childProperty.50zgg4kyp4k0')}}</el-button>
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="flex-al Inquire-box mb12">
        <div class="ipt-box" style="width:250px;">
          <el-input
            v-model="filter.keyword"
            clearable
            :placeholder="$t('gradenSet.gradenSet.childProperty.50zgg4kypmo0')"
            @clear="search"
            @keyup.enter.native="search"
          ></el-input>
        </div>
        <el-button type="primary" size="mini" class="search-btn fs14" @click="search">{{$t('gradenSet.gradenSet.childProperty.50zgg4kyq340')}}</el-button>
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <settingTableCont :tableData="tableList" @switchChange="switchChange">
          <!-- 按钮操作组********start -->
          <el-table-column ref="fixedColumn" :label="$t('gradenSet.gradenSet.childProperty.50zgg4kyqio0')" align="center" width="120px" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.native.prevent="handEdit(scope.row)">{{$t('gradenSet.gradenSet.childProperty.50zgg4kyqz40')}}</el-button>
              <el-button type="text" size="small" @click.native.prevent="handDelete(scope.row)">{{$t('gradenSet.gradenSet.childProperty.50zgg4kyrl40')}}</el-button>
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </settingTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px;"
          :current-page.sync="paging.curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.pageTotal"
          @current-change="curPageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 侧边弹窗******新增或者编辑幼儿属性 -->
    <el-drawer
      :title="propData.isEdit? $t('gradenSet.gradenSet.childProperty.add1') : $t('gradenSet.gradenSet.childProperty.add2') "
      :visible.sync="propData.cancelVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box"
      :before-close="propData.handleClose"
    >
      <div class="slider-btn">
        <el-button v-if="!propData.isEdit" type="primary" size="mini" @click="onSubmit">{{$t('gradenSet.gradenSet.childProperty.50zgg4kys740')}}</el-button>
        <el-button v-else type="primary" size="mini" @click="onEditSubmit">{{$t('gradenSet.gradenSet.childProperty.50zgg4kys740')}}</el-button>
      </div>
      <div class="slider-content pAll20">
        <el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item :label="$t('gradenSet.gradenSet.childProperty.50zgg4kyslk0')" prop="postpart_name">
            <el-input
              clearable
              :placeholder="$t('gradenSet.gradenSet.childProperty.50zgg4kyszg0')"
              v-model="ruleForm.info_nation"
              style="width:320px;"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('gradenSet.gradenSet.childProperty.50zgg4kytdc0')" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="0">{{$t('gradenSet.gradenSet.childProperty.50zgg4kytus0')}}</el-radio>
              <el-radio :label="1">{{$t('gradenSet.gradenSet.childProperty.50zgg4kyu980')}}</el-radio>
              <el-radio :label="2">{{$t('gradenSet.gradenSet.childProperty.50zgg4kyuxc0')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="ruleForm.resource=='1'" :label="$t('gradenSet.gradenSet.childProperty.50zgg4kyv8w0')" prop="postpart_name1">
            <el-input
              clearable
              :placeholder="$t('gradenSet.gradenSet.childProperty.50zgg4kyvjk0')"
              v-model="ruleForm.info_nation"
              style="width:300px;"
            ></el-input>
            <span class="ml5">{{$t('gradenSet.gradenSet.childProperty.50zgg4kyvuw0')}}</span>
          </el-form-item>
          <el-form-item v-if="ruleForm.resource=='2'" :label="$t('gradenSet.gradenSet.childProperty.50zgg4kyw5o0')" prop="postpart_name1">
            <el-input
              clearable
              :placeholder="$t('gradenSet.gradenSet.childProperty.50zgg4kywg40')"
              v-model="ruleForm.info_nation"
              style="width:300px;"
            ></el-input>
            <span class="ml5">%</span>
          </el-form-item>
        </el-form>
        <p class="color-red">* {{$t('gradenSet.gradenSet.childProperty.50zgg4kywqw0')}}</p>
      </div>
    </el-drawer>
    <!-- 删除幼儿属性 -->
    <popTips
      :dialogVisable="delItem"
      :popTipsCont="popTips_del"
      @handConfirm="delItem=false"
      @handCancel="delItem=false"
      @handleCloseTip="delItem=false"
    ></popTips>
  </div>
</template>

<script>
import settingTableCont from "@/components/tables/settingTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
export default {
  name: "setting",
  components: {
    settingTableCont,
    popTips
  },
  data() {
    let item = {
      a1: "222222222222222",
      a2: "222222222222222",
      a3: "222222222222222",
      a4: "222222222222222",
      a5: "222222222222222",
      a6: "222222222222222"
    };
    return {
      delItem: false, //删除幼儿属性
      //删除幼儿属性****弹窗
      popTips_del: {
        btn_text1: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyx6o0'),
        btn_text2: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyxg80'),
        title: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyxqo0'),
        context: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyxzk0')
      },
      //检索-table
      filter: {
        keyword: ""
      },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [
          {
            fieldstring: "a1",
            fieldname: "111111",
            show: "1"
            // sortable: true
          },
          {
            fieldstring: "a2",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a3",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a4",
            fieldname: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyy7o0'),
            show: "1",
            isswitch: true
          },
          {
            fieldstring: "a5",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a6",
            fieldname: "111111",
            show: "1"
          }
        ],
        // 表格数据
        list: Array(10).fill(item),
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0
        }
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 10
      },
      //侧边弹窗******新增或者编辑幼儿属性
      propData: {
        cancelVisible: false, //新增或者编辑幼儿属性
        isEdit: false, //是否编辑幼儿属性
        //select
        options: [
          {
            value: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyyg80'),
            label: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyyvo0')
          }
        ]
      },
      // 表单
      ruleForm: {
        postpart_name: "",
        region: "",
        postpart_name1: "",
        region1: "",
        desc: "",
        date1: "",
        date2: "",
        date: "",
        resource: 0
      },
      // 表单验证
      rules: {
        postpart_name: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyz680'),
            trigger: "blur"
          }
        ],
        region: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyzf00'),
            trigger: "change"
          }
        ],
        postpart_name1: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyzns0'),
            trigger: "blur"
          }
        ],
        region1: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.childProperty.50zgg4kyzwg0'),
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    //检索
    search() {
      console.log(1111);
    },
    //新增
    handAdd() {
      this.propData.isEdit = false; //是否编辑幼儿属性
      this.propData.cancelVisible = !this.propData.cancelVisible;
    },
    //编辑
    handEdit(row) {
      this.propData.isEdit = true; //是否编辑幼儿属性
      this.propData.cancelVisible = !this.propData.cancelVisible;
      console.log(row);
    },
    //删除
    handDelete(row) {
      console.log(row);
      this.delItem = !this.delItem;
    },
    //侧边弹窗 - 新增 - 提交
    onSubmit() {},
    //侧边弹窗 - 编辑 - 提交
    onEditSubmit() {},
    // 启用状态点击
    switchChange(v1, v2) {
      console.log(v1, v2);
    },
    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
    },
    // pageSize改变
    pageSizeChange() {
      this.paging.curPage = 1;
    },
    //侧边弹窗-关闭
    handleClose(done) {
      done();
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 55
        );
      }
    });
  }
};
</script>

<style lang="less">
// #DataMaintenance-childProperty {
// }
</style>
